<template>
  <div>
    <div class="wrap">
      <affix :label="$t('monitor.orderSummary')" :bodyStyle="{ paddingTop: '30px' }">
        <el-form ref="form" :model="form" label-position="left" :inline="true">
          <el-form-item :label="$t('public.agent')">
            <search module="business" power="business" @change="agentSearch" ref="searchAgent"></search>
          </el-form-item>
          <br />
          <el-form-item :label="$t('monitor.busyType')">
            <el-select
              size="mini"
              v-model="form.login"
              collapse-tags
              @change="stateChange"
              :placeholder="$t('public.pleasePick')"
              filterable
              :multiple="true"
              class="width-full"
            >
              <el-option v-for="(item, index) in loginState" :label="item.value" :key="index" :value="item.key">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('monitor.orderSwitch')">
            <el-select
              size="mini"
              v-model="form.switch"
              collapse-tags
              @change="stateChange"
              :placeholder="$t('public.pleasePick')"
              filterable
              clearable
              :multiple="false"
              class="width-full"
            >
              <el-option
                v-for="(item, index) in allState"
                :label="item.value"
                :key="index"
                value-key="_id"
                :value="item.key"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!--坐席详情组件-->
        <table-agent
          :allList="searchAgent"
          class="monitor-table"
          :cacheAgent="this.cacheAgent"
          :header="monitorHeader"
        ></table-agent>
      </affix>
    </div>
  </div>
</template>

<script>
import Affix from '../../ui-modules/affix/Affix'
import search from './base/AgentSearch'
import tableAgent from './base/tableAgentOrder'
export default {
  name: 'orderMonitorTable',
  components: {
    Affix,
    search,
    tableAgent
  },
  data() {
    return {
      form: {
        login: [], // 登录状态
        switch: '' // 接单开关
      },
      cacheAgent: [],
      currentStateCondition: {},
      loginState: [
        {
          key: 'pcState:1',
          value: this.$t('monitor.agentOline', { name: 'PC' })
        },
        {
          key: 'mobileState:1',
          value: this.$t('monitor.agentOline', { name: 'APP' })
        },
        {
          key: 'pcState:0',
          value: this.$t('monitor.agentOffline', { name: 'PC' })
        },
        {
          key: 'mobileState:0',
          value: this.$t('monitor.agentOffline', { name: 'APP' })
        }
      ],
      monitorHeader: [],
      allState: [
        {
          key: 'autoOrderInitStatus:order',
          value: this.$t('monitor.orderSwitchOn')
        },
        {
          key: 'autoOrderInitStatus:busy',
          value: this.$t('monitor.orderSwitchOff')
        }
      ]
    }
  },
  inject: ['webchatPeers', 'init'],
  computed: {
    // 显示坐席总数
    searchAgent() {
      console.log(this.cacheAgent)
      let cacheAgent = this.cacheAgent
      let arr = []
      cacheAgent.forEach((item) => {
        if (item.show) {
          arr.push(item._id)
        }
      })
      return arr
    }
  },
  methods: {
    // 坐席组件change事件
    agentSearch({ type, leaf, includeSubordinate }) {
      console.log(leaf)
      this.cacheAgent = leaf.map((item) => {
        return { _id: item, show: true }
      })
      if (includeSubordinate) {
        // 我和我的下属
        let agentList = this.$refs.searchAgent.allAgent
        let getAgent = function (pid) {
          for (var i = 0; i < agentList.length; i++) {
            var obj = agentList[i]
            if (obj.parentId && obj.parentId === pid) {
              if (!this.cacheAgent.some((item) => item._id === obj._id)) {
                this.cacheAgent.push({ _id: obj._id, show: true })
              }
              getAgent.call(this, obj._id)
            }
          }
        }
        this.cacheAgent.map((item) => {
          getAgent.call(this, item._id)
        })
      }
      this.search()
    },
    stateChange() {
      let filterLogin = {}
      let filterState = {}
      this.form.login.forEach((item) => {
        let _state = item.split(':')
        if (filterLogin[_state[0]] === undefined) {
          filterLogin[_state[0]] = parseInt(_state[1])
        } else {
          delete filterLogin[_state[0]]
        }
      })
      let state = this.form.switch.split(':')
      filterState[state[0]] = state[1]
      this.currentStateCondition = Object.assign({}, filterLogin, filterState)
      this.search()
    },
    search() {
      this.cacheAgent.forEach((item) => {
        item.show = this.filterCondition(item._id)
      })
    },
    filterCondition(_id) {
      let isTrue = true
      let _agent = this.webchatPeers[_id] || {}
      for (let i in this.currentStateCondition) {
        if (_agent[i] !== this.currentStateCondition[i]) {
          isTrue = false
          break
        }
      }
      return isTrue
    },
    close(data) {
      this.isShow = false
      if (data === 'save') {
        this.$store.dispatch('getReportTableHeader', 'monitor_agent_order').then((res) => {
          res.Config.splice(0, 2)
          this.monitorHeader = JSON.parse(JSON.stringify(res.Config))
        })
      }
    }
  },
  beforeMount() {
    this.init('webchatInit')
    // 初始化表头
    this.close('save')
  },
  beforeDestroy() {
  }
}
</script>
<style lang="stylus" scoped>
.wrap
  padding 20px 20px 10px
.width-full
  width 220px
  margin-right 10px
</style>
